import { planAddPlanAPI } from '@src/apis/configManagement';
import { useCinfSysCode } from '@src/components/useComponent';
import { Form, Row, Col, Input, Select, Button, Space, Modal } from 'antd';
import qs from 'qs';
import { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
interface ServicerNamesProps {
  code: string;
  name: string;
}
export const PlanManagementSearchForm = ({ searchBtnF }: any) => {
  let history = useHistory();
  const [form] = Form.useForm();
  const [addPlanyForm] = Form.useForm();
  const { confSysCode } = useCinfSysCode();

  const { Option } = Select;
  const [resetButtonDisabled, setResetButtonDisabled] = useState<boolean>(true);
  const [addPlanyShow, setAddPlanyShow] = useState<boolean>(false);
  const onReset = () => {
    form.resetFields();
    setResetButtonDisabled(true);
  };
  const onFinish = async (values: any) => {
    searchBtnF(values);
  };
  const onValuesChange = () => {
    setResetButtonDisabled(!qs.stringify(form.getFieldsValue()));
  };
  const onOk = () => {
    addPlanyForm.validateFields().then((values: any) => {
      console.log(values);
      setAddPlanyShow(false);
      planAddPlanAPI(values).then((result: any) => {
        console.log(result);
      });
    });
  };
  return (
    <>
      <Form
        className="anTopSearchForm fff pad20"
        form={form}
        layout="inline"
        name="maitainSearcher"
        onFinish={onFinish}
        onValuesChange={onValuesChange}
      >
        <Form.Item label="业务类型" name="productItemType">
          <Select showSearch allowClear optionFilterProp="children" placeholder="请选择">
            {confSysCode?.map((item: any, index: number) => {
              return (
                <Option key={item.code} value={item.code}>
                  {item.codeName}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item label="出单子账号" name="makeCode">
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item label="计划代码" name="planCode">
          <Input placeholder="请输入" />
        </Form.Item>
        <div className="searchBtnBox">
          <div>
            <Button
              className="marg020"
              onClick={() => {
                addPlanyForm.resetFields();
                setAddPlanyShow(true);
              }}
            >
              新增计划
            </Button>
            <Button
              onClick={() => {
                history.push('/batchAddPlan');
              }}
            >
              批量新增计划
            </Button>
            <Button className="marg020" disabled={resetButtonDisabled} onClick={onReset}>
              重置
            </Button>
            <Button type={'primary'} htmlType="submit">
              搜索
            </Button>
          </div>
        </div>
      </Form>
      <Modal
        title="新增计划"
        destroyOnClose={true}
        visible={addPlanyShow}
        onCancel={() => {
          setAddPlanyShow(false);
        }}
        onOk={onOk}
      >
        <div>
          <Form
            className="anTopSearchForm fff pad20"
            form={addPlanyForm}
            name="maitainSearcher"
            labelCol={{
              md: { span: 6 },
            }}
            wrapperCol={{
              md: { span: 16 },
            }}
          >
            <Form.Item label="业务类型" name="productItemType" rules={[{ required: true }]}>
              <Select showSearch allowClear optionFilterProp="children" placeholder="请选择">
                {confSysCode?.map((item: any, index: number) => {
                  return (
                    <Option key={item.code} value={item.code}>
                      {item.codeName}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item label="出单子账号" name="makeCode" rules={[{ required: true }]}>
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item label="计划代码" name="planCode" rules={[{ required: true }]}>
              <Input placeholder="请输入" />
            </Form.Item>
          </Form>
        </div>
      </Modal>
    </>
  );
};
